<template>
  <div class="box">
    <!-- 左上box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Left"
      title="各含水层动态监测"
    >
      <!-- 传感器调校监测 统计 -->
      <div slot="content" class="MainCoal-box-content">
        <ListVue :personnelList="personList" @changeItem="changeListItem"></ListVue>
        <div class="charttitle">近24小时{{ chartTitle }}水位变化</div>
        <div class="outage" style="height:11.875rem;">
          <LineChart
            :chartData="chartDatas"
            :text="['水位']"
            :area="true"
            unit="mm"
            :color="['#33C6FD']"
          />
        </div>
      </div>
    </HerinContainer>
    <!-- 左下box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Left"
      title="水文长观孔监测"
    >
      <!-- 传感器告警信息 告警分析 -->
      <div slot="content" class="MainCoal-box-content">
        <div class="sensor">
          <p class="sum">水文长观孔</p>
          <p>
            <span class="num" style="color: rgba(0, 253, 255, 100)">{{count}}</span
            ><span class="piece">个</span>
          </p>
        </div>
        <div class="search-wrap">
          <HerinSelect
            v-model="selectType"
            class="herin-select"
            :options="outageOption"
            place-holder=""
            :height="34"
            :width="330"
            :showOptionscount="3"
            @HerinSelectChange="handleSelectChange"
            style="background-color: rgba(255, 255, 255, 0.05)"
          />
        </div>
        <p class="grap">监测指标<span>监测时间:{{swcgkInfo?.createTime}}</span></p>
        <div class="longView">
          <div class="ViewCont">
            <div><img src="@/assets/img/monitor/icon-10.png" alt="" />状态</div>
            <div>
              <p style="color:rgba(87, 255, 170, 100)">
                {{swcgkInfo?.state}} <span class="piece"></span>
              </p>
            </div>
          </div>
          <div class="ViewCont">
            <div><img src="@/assets/img/monitor/icon-11.png" alt="" />水位</div>
            <div>
              <p>
                {{swcgkInfo?.jcvl}} <span class="piece">m</span>
              </p>
            </div>
          </div>
          <div class="ViewCont">
            <div><img src="@/assets/img/monitor/icon-12.png" alt="" />水温</div>
            <div>
              <p>
                {{swcgkInfo?.jcvl2}} <span class="piece">℃</span>
              </p>
            </div>
          </div>
          <div class="ViewCont">
            <div><img src="@/assets/img/monitor/icon-13.png" alt="" />水压</div>
            <div>
              <p>
                {{swcgkInfo?.jcvl1}} <span class="piece">Pa</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </HerinContainer>
  </div>
</template>
<script>
import HerinContainer from '@/components/HerinContainer';
import LineChart from '@/components/chart/line/LineChart.vue';
import HerinSelect from '@/components/herinselect/HerinSelect.vue';
import ListVue from './Lists.vue';

import { getHscList, getHscStatistics, getSwcgkStatistics } from '@/api/item/monitor/hydrology.js';
import { xFormat } from '@/utils/date';

export default {
  components: {
    HerinContainer,
    LineChart,
    HerinSelect,
    ListVue
  },
  data() {
    return {
      selectType: '',
      ViewList: [],
      chartData: [
        { x: '00:00', y: 7, s: '水位' },
        { x: '04:00', y: 11, s: '水位' },
        { x: '08:00', y: 15, s: '水位' },
        { x: '12:00', y: 16, s: '水位' },
        { x: '16:00', y: 20, s: '水位' },
        { x: '20:00', y: 14, s: '水位' },
        { x: '24:00', y: 17, s: '水位' }
      ],
      color: ['#34C8FF', '#2AD49A', '#00FDFF'],
      current: 0,
      titleTwotab: [0, 0],
      personList: [],
      chartTitle: '',
      zdnum: '',
      count: '',
      swcgkList: [],
      swcgkInfo: {},
      actionLoopTimer3S: null,
      actionLoopTimer1H: null
    };
  },
  computed: {
    chartDatas() {
      return this.chartData.map(item => {
        return {
          x: xFormat(item.x),
          y: item.y * 1,
          s: item.s
        };
      });
    },
    outageOption() {
      return this.swcgkList.map(item => {
        return {
          label: item.zdname,
          value: item.zdnum
        };
      });
    }
  },
  watch: {
    zdnum: {
      handler(newV, oldV) {
        if (newV !== oldV) {
          this.getHscStatistics();
        } else {
          this.startActionLoop1H(this.getHscStatistics);
        }
      },
      deep: true
    },
    selectType: {
      handler(value) {
        if (value) {
          this.swcgkInfo = this.swcgkList.find(item => item.zdnum === this.selectType);
        }
      },
      deep: true
    },
    swcgkList: {
      handler(value) {
        if (value && value.length > 0) {
          this.swcgkInfo = value[0];
          this.selectType = value[0].zdnum;
        }
      },
      deep: true
    }
  },
  mounted() {
    this.startActionLoop3S(this.all3SFn);
    this.startActionLoop1H(this.getHscStatistics);
  },
  beforeDestroy() {
    this.actionLoopTimer3S && clearInterval(this.actionLoopTimer3S);
    this.actionLoopTimer3S = null;
    this.actionLoopTimer1H && clearInterval(this.actionLoopTimer1H);
    this.actionLoopTimer1H = null;
  },
  methods: {
    all3SFn() {
      this.getSwcgkStatistics();
      this.getHscList();
    },
    // 每隔 3S 循环查询数据
    startActionLoop3S(callback) {
      callback();
      this.actionLoopTimer3S = setInterval(callback, 3000);
    },
    // 每隔 1H 循环查询数据
    startActionLoop1H(callback) {
      callback();
      this.actionLoopTimer1H = setInterval(callback, 3600000);
    },
    changeListItem(item) {
      if (item.zdnum) {
        this.chartTitle = item.zdname;
        this.zdnum = item.zdnum;
      }
    },
    // 水文长观
    handleSelectChange() {
      console.log('ooo');
    },

    // 各含水层数据列表
    async getHscList() {
      const res = await getHscList();
      if (res.data.code === 200) {
        this.personList = res.data.data;
      }
    },

    // 获取含水层近24小时含水层监测值
    async getHscStatistics() {
      if (!Object.is(this.zdnum, '')) {
        const res = await getHscStatistics(this.zdnum);
        if (res.data.code === 200) {
          this.chartData = res.data.data;
        }
      }
    },

    // 水文长观孔统计
    async getSwcgkStatistics() {
      const res = await getSwcgkStatistics();
      if (res.data.code === 200) {
        this.swcgkList = res.data.data.swcgkList;
        this.count = res.data.data.count;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.MainCoal-box {
  &-tab {
    display: flex;
    .btn {
      @include btn;
    }
    .isbtn {
      background-color: rgba(0, 228, 255, 0.2);
      color: $cyan;
    }
  }
  &-content {
    .mouldbox {
      margin-top: 1.875rem;
    }
    .mouldbox:first-child {
      margin-top: 0.3125rem;
    }
  }
  .num {
    font-size: 16px;
    text-align: right;
    font-family: Helvetica-bold;
    font-weight: 900;
  }
  .piece {
    color: rgba(131, 131, 131, 100);
    font-size: 12px;
    text-align: left;
    font-family: Helvetica-regular;
    display: inline;
  }
  .sensor {
    display: flex;
    width: 20.625rem;
    height: 1rem;
    justify-content: space-between;
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    margin-bottom:.625rem;
    p {
      display: flex;
      align-items: center;
    }
    .sum {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
      text-align: left;
      font-family: Helvetica-regular;
    }
    .piece{
      margin-left: .3125rem;
    }
  }
  .charttitle {
    font-size: 0.75rem;
    color: $light2Grey;
    margin: .9375rem 0 .875rem;
  }
  .outageList {
    .cont {
      justify-content: space-between;
      display: flex;
      p {
        align-items: center;
        display: flex;
      }
      .title {
        color: rgba(248, 248, 248, 100);
        font-size: 14px;
        margin: 0.625rem 0;
      }
    }
    .state {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: rgba(173, 173, 173, 100);
    }
  }
  .broken {
    height: 2.375rem;
    width: 20.625rem;
    display: flex;
    justify-content: space-between;
    div {
      width: 10rem;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 0.625rem;
    }
    .title {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
    }
    .num {
      color: rgba(0, 253, 255, 100);
      font-size: 16px;
      font-weight: 900;
    }
  }
  .sensorSort {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .chat {
      width: 8.5625rem;
      height: 7.4375rem;
    }
    .right {
      width: 8.125rem;
      height: 7.4375rem;
      display: flex;
      flex-direction: column;
      align-content: space-between;
      p {
        margin: 0;
      }
      .point {
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
      }
      .title {
        color: rgba(173, 173, 173, 100);
        font-size: 12px;
        margin: 0 0.75rem 0 0.375rem;
        display: inline-block;
        width: 2.25rem;
      }
      .num {
        color: rgba(248, 248, 248, 100);
        font-size: 14px;
        margin-right: 0.3125rem;
      }
    }
  }
  .check {
    .checkCont {
      margin-bottom: 0.3125rem;
    }
    .title {
      display: flex;
      align-items: center;
      margin-bottom: 0.3125rem;
      .radio {
        width: 1rem;
        height: 1rem;
        border: 1px solid rgba(141, 141, 141, 100);
      }
      .titlecolor {
        width: 1rem;
        height: 1rem;
        background: url(@/assets/img/monitor/icon-9.png);
        background-size: 100%;
      }
      .checktitle {
        font-size: 0.75rem;
        color: $light2Grey;
        margin-left: 0.3125rem;
      }
    }
    .levelNum {
      display: flex;
      justify-content: space-between;
      color: rgba(232, 232, 232, 100);
      font-size: 12px;
      width: 19.375rem;
      margin-left: .1875rem 0 0 .625rem;
      .backcolor {
        background-color: rgba(0, 253, 255, 0.1);
      }
      p {
        width: 8.75rem;
        line-height: 1.875rem;
        padding-left: 0.625rem;
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 0.1);
        display: flex;
        justify-content: space-between;
      }
      span {
        color: rgba(0, 253, 255, 100);
        font-size: 12px;
      }
    }
  }
  .longView {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .ViewCont {
      width: 9.6875rem;
      height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: .125rem;
      background-color: rgba(255, 255, 255, 0.1);
      margin-bottom:.625rem;
      div {
        color: rgba(232, 232, 232, 100);
        font-size: .875rem;
        display: flex;
        align-items: center;
      }
      p {
        color: rgba(46, 214, 230, 100);
        font-size: 14px;
      }
      img {
        width: 0.9375rem;
        height: 0.9375rem;
        margin: 0 0.3125rem;
      }
      .piece{
        margin-left: .3125rem;
        margin-right: .625rem;
      }
    }
    .ViewCont:nth-child(3), .ViewCont:nth-child(4){
      margin-bottom: 0;
    }
  }
  .search-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: .9375rem;
    p {
      display: flex;
      align-items: center;
      color: rgba(232, 232, 232, 100);
      font-size: 14px;
    }
    img {
      width: 0.875rem;
      height: 0.875rem;
      margin-right: 0.625rem;
    }
  }
  .grap{
    display: flex;
    justify-content: space-between;
    color: rgba(232, 232, 232, 0.8);
    font-size: 12px;
    height: .75rem;
    line-height: .75rem;
    margin-bottom: 0.625rem;
  }
}
</style>
